<template>
    <view class="mine-container">
        <view class="u-flex-1">
            <view class="mine-header" :style="{paddingTop: barHeight + 'px'}">
                <view class="mine-setting u-text-right u-p-t-20 u-p-r-30">
                    <!-- #ifndef APP-PLUS || H5 -->
                    <u-icon name="setting" color="#F2F2F2" size="48" @click="onSetting"></u-icon>
                    <u-icon name="bell" color="#F2F2F2" size="48" @click="toMessage" class="u-m-l-20"></u-icon>
                    <!-- #endif -->
                    <!-- #ifdef APP-PLUS || H5 -->
                    <view class="u-margin-top-50"></view>
                    <!-- #endif -->
                </view>
            </view>
            <view class="notice-bar-view">
              <view class="u-flex u-row-between u-p-t-30">
                <view class="u-flex u-p-l-30">
                    <view>
                        <u-image width="100" height="100" shape="circle" :src="user.face || defaultFace"></u-image>
                    </view>
                    <view class="mine-name-view u-m-l-30" v-if="user">
                        <view class="mine-nickname">{{user.nickname}}</view>
                        <view class="mine-uname">你好，欢迎来到{{site.site_name}}</view>
                        <view v-if="!user.mobile">
                            <!-- #ifdef MP -->
                            <button class="bind-phone" size="mini" @getphonenumber="wxMiniBindPhone" open-type="getPhoneNumber" >点击绑定手机号
                                <u-icon class="u-m-l-15" name='arrow-right'></u-icon>
                            </button>
                            <!-- #endif -->
                            <!-- #ifndef MP -->
                            <button class="bind-phone" size="mini" @click="bindPhone">点击绑定手机号
                                <u-icon class="u-m-l-15" name='arrow-right'></u-icon>
                            </button>
                            <!-- #endif -->
                        </view>
                    </view>
                    <view class="no-login-view" v-if="!user" @click="handleJudgeLogin('/pages/auth/login')">
                        登录/注册
                    </view>
                </view>
                <view @click="handleJudgeLogin('/mine-module/points')" class="mine-jifen">
                    <u-icon name="jifen-xuanzhong" custom-prefix="custom-icon" color="#c78a0b" size="22"></u-icon>
                    <text class="u-m-l-10">登录送积分</text>
                </view>
            </view>
                <view class="mine-common-view">
                    <view class="common-item" @click="handleJudgeLogin('/mine-module/collect')">
                        <view class="num">{{ nums.goods_collect_count || '--' }}</view>
                        <view class="title">收藏商品</view>
                    </view>
                    <u-line direction="col" length="50%" margin="30rpx"></u-line>
                    <view class="common-item" @click="handleJudgeLogin('/mine-module/points')">
                        <view class="num">{{ points.consum_point || '--'}}</view>
                        <view class="title">消费积分</view>
                    </view>
                    <u-line direction="col" length="50%" margin="30rpx"></u-line>
                    <view class="common-item" @click="handleJudgeLogin('/mine-module/coupon')">
                        <view class="num">{{ coupons || '--' }}</view>
                        <view class="title">优惠券</view>
                    </view>
                </view>
            </view>
            <view class="body-view" >
                <!-- 我的订单 -->
                <view class="block-view">
                    <view class="block-header u-flex u-row-between">
                        <view class="title">
                            我的订单
                        </view>
                        <view class="more-text" @click="handleJudgeLogin('/order-module/order/order-list?value=', 0)">
                            全部订单
                            <u-icon class="u-margin-left-8" name="arrow-right" color="#909399" size="27"></u-icon>
                        </view>
                    </view>
                    <u-line></u-line>
                    <view class="block-body">
                        <view class="block-item-5" @click="handleJudgeLogin('/order-module/order/order-list?value=', 1)">
                            <view class="block-img pay-icon">
                                <image class="block-icon" src="@/static/images/member/pay.png"></image>
                            </view>
                            <view class="block-title" >待付款</view>
                        </view>
                        <view class="block-item-5" @click="handleJudgeLogin('/order-module/order/order-list?value=', 2)">
                            <view class="block-img send-icon">
                                <image class="block-icon" src="@/static/images/member/send.png"></image>
                            </view>
                            <view class="block-title">待发货</view>
                        </view>
                        <view class="block-item-5" @click="handleJudgeLogin('/order-module/order/order-list?value=', 3)">
                            <view class="block-img deliver-icon">
                                <image class="block-icon" src="@/static/images/member/deliver.png"></image>
                            </view>
                            <view class="block-title" >待收货</view>
                        </view>
                        <view class="block-item-5" @click="handleJudgeLogin('/order-module/order/order-list?value=', 4)">
                            <view class="block-img message-icon">
                                <image class="block-icon" src="@/static/images/member/message.png"></image>
                            </view>
                            <view class="block-title">评价</view>
                        </view>
                        <view class="block-item-5" @click="handleJudgeLogin('/order-module/order/after-sale/after-sale')">
                            <view class="block-img service-icon">
                                <image class="block-icon" src="@/static/images/member/service.png"></image>
                            </view>
                            <view class="block-title">退款/退货</view>
                        </view>
                    </view>
                </view>
                <!-- 其它服务 -->
                <view class="block-view">
                    <view class="block-header">
                        <view class="title">
                            其它服务
                        </view>
                        <view class="more-text">
                        </view>
                    </view>
                     <u-line></u-line>
                    <view class="block-body">
                        <view class="block-item-4">
                            <view class="block-icon shouchang-icon" @click="handleJudgeLogin('/mine-module/collect')">
                                <u-icon name="shoucang" custom-prefix="custom-icon" size="40"></u-icon>
                            </view>
                            <view class="block-title">我的收藏</view>
                        </view>
                        <view class="block-item-4" @click="handleJudgeLogin('/mine-module/points')">
                            <view class="block-icon jifen-icon">
                                <u-icon name="ziyuan" custom-prefix="custom-icon" size="40"></u-icon>
                            </view>
                            <view class="block-title">我的积分</view>
                        </view>
                        <view class="block-item-4" @click="handleJudgeLogin('/mine-module/myfootprint')">
                            <view class="block-icon zuji-icon">
                                <u-icon name="zuji" custom-prefix="custom-icon" size="40"></u-icon>
                            </view>
                            <view class="block-title">我的足迹</view>
                        </view>
                        <view class="block-item-4" @click="handleJudgeLogin('/mine-module/coupon')">
                            <view class="block-icon youhuiquan-icon">
                                <u-icon name="youhuiquan2" custom-prefix="custom-icon" size="40"></u-icon>
                            </view>
                            <view class="block-title">优惠券</view>
                        </view>
                        <view class="block-item-4" @click="handleJudgeLogin('/mine-module/distribution/distribution-manage')">
                            <view class="block-icon fenxiao-icon">
                                <u-icon name="jiagoufenxiao" custom-prefix="custom-icon" size="40"></u-icon>
                            </view>
                            <view class="block-title">分销管理</view>
                        </view>
                        <view class="block-item-4" @click="handleJudgeLogin('/mine-module/profile')">
                            <view class="block-icon wode-icon">
                                <u-icon name="dibutubiao_wode" custom-prefix="custom-icon" size="40"></u-icon>
                            </view>
                            <view class="block-title">个人信息</view>
                        </view>
                        <view class="block-item-4" @click="handleJudgeLogin('/mine-module/address')">
                            <view class="block-icon dizhi-icon">
                                <u-icon name="dizhi" custom-prefix="custom-icon" size="40"></u-icon>
                            </view>
                            <view class="block-title">地址管理</view>
                        </view>
                        <view class="block-item-4" @click="handleJudgeLogin('/mine-module/website-message')">
                            <view class="block-icon xiaoxi-icon">
                                <u-icon name="zhanneixiaoxi" custom-prefix="custom-icon" size="40"></u-icon>
                            </view>
                            <view class="block-title">站内消息</view>
                        </view>
                        <view class="block-item-4" @click="handleJudgeLogin('/mine-module/account-safe')">
                            <view class="block-icon anquan-icon">
                                <u-icon name="anquanzhuye" custom-prefix="custom-icon" size="40"></u-icon>
                            </view>
                            <view class="block-title">账号安全</view>
                        </view>
                        <view class="block-item-4" @click="handleJudgeLogin('/mine-module/members-asks')">
                            <view class="block-icon zixun-icon">
                                <u-icon name="server-man"  size="40"></u-icon>
                            </view>
                            <view class="block-title">咨询管理</view>
                        </view>
                        <view class="block-item-4" @click="handleJudgeLogin('/mine-module/increase-ticket')">
                            <view class="block-icon zengpiao-icon">
                                <u-icon name="fapiaoguanli" custom-prefix="custom-icon" size="40"></u-icon>
                            </view>
                            <view class="block-title">增票资质</view>
                        </view>
                        <view class="block-item-4" @click="handleJudgeLogin('/mine-module/my-receipt/receipt')">
                            <view class="block-icon fapiao-icon">
                                <u-icon name="fapiao" custom-prefix="custom-icon" size="40"></u-icon>
                            </view>
                            <view class="block-title">我的发票</view>
                        </view>
                        <view class="block-item-4" @click="handleJudgeLogin('/mine-module/account-balance')">
                            <view class="block-icon yue-icon">
                                <u-icon name="yue1" custom-prefix="custom-icon" size="40"></u-icon>
                            </view>
                            <view class="block-title">账户余额</view>
                        </view>
                        <view @click="handleJudgeLogin('/mine-module/setting')" class="block-item-4">
                            <view class="block-icon setting-icon">
                                <u-icon name="setting" custom-prefix="custom-icon" size="40"></u-icon>
                            </view>
                            <view class="block-title">设置</view>
                        </view>
                        <view @click="handleJudgeLogin('/mine-module/evaluation-list')" class="block-item-4">
                            <view class="block-icon iconfontevaluate-icon">
                                <u-icon name="iconfontevaluate" custom-prefix="custom-icon" size="40"></u-icon>
                            </view>
                            <view class="block-title">评价管理</view>
                        </view>
                        <!-- <view @click="handleJudgeLogin('/mine-module/help-center')" class="block-item-4">
                            <view class="block-icon help-icon">
                                <u-icon name="leimupinleifenleileibie" custom-prefix="custom-icon" size="40"></u-icon>
                            </view>
                            <view class="block-title">帮助中心</view>
                        </view> -->
                        <view @click="handleJudgeLogin('/pages/shop/apply')" class="block-item-4">
                            <view class="block-icon shop-icon">
                                <u-icon name="shop" custom-prefix="custom-icon" size="40"></u-icon>
                            </view>
                            <view class="block-title">{{user.have_shop ? '我的店铺' : '商家入驻'}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 为你推荐商品 -->
        <goods-recommend ref="goodsRecommend" title="为你推荐" :categoryId="491"></goods-recommend>
        <u-back-top :scroll-top="scrollTop" :customStyle="customStyle" :iconStyle="iconStyle"></u-back-top>
        <u-mask
          :show="show_message_mask"
          class="message-mask"
          :custom-style="{background: 'rgba(0,0,0,0)'}"
          :zoom="false"
          @click="show_message_mask = false"
        >
          <view class="message-menus" :style="{top: `calc(${barHeight}px + 88rpx)`}">
            <view class="item-menus" @tap="handleJudgeLogin('/chat-module/chat-list')">
              在线客服{{ unread_chat_num > 0 ? `(${unread_chat_num > 99 ? '99+' : unread_chat_num})` : '' }}
            </view>
            <view class="item-menus" @tap="handleJudgeLogin('/mine-module/website-message')">站内消息</view>
          </view>
        </u-mask>
    </view>
</template>

<script>
import * as API_Members from '@/api/members.js'
import Cache, { Keys } from '@/utils/cache.js'
import * as API_Connect from '@/api/connect.js'
import * as API_Message from '@/api/message'
import config from '@/config/config'

export default {
  data() {
    return {
      user: Cache.getItem(Keys.user),
      nums: '',
      points: '', //积分
      coupons: '', //优惠券
      defaultFace: '/static/images/member/icon-noface.jpg',
      // #ifdef MP
      barHeight: this.customBar, //状态栏+导航栏高度
      // #endif
      // #ifdef APP-PLUS || H5
      barHeight: this.statusBar, //状态栏高度
      // #endif
      scrollTop: 0, //滚动高度
      customStyle: {
        background: '#B2B2B2'
      },
      iconStyle: {
        color: '#FFFFFF',
        fontSize: '36rpx'
      },
      site: Cache.getItem(Keys.site),
      show_message_mask: false,
      unread_chat_num: 0,
      unread_timer: ''
    }
  },
  //每次进入页面都会调用
  onShow() {
    const cacheUser = Cache.getItem(Keys.user)
    if (cacheUser) {
      this.getMember()
      this.getUnreadChatNum()
      this.getStatisticsNum()
      this.getPoints()
      this.getCoupons()
      getApp().getSiteData()
    } else {
      this.user = ''
      this.nums = ''
      this.points = ''
      this.coupons = ''
    }
  },
  onLoad() {
    //监听退出登录消息
    uni.$on('logout', function (data) {
      this.user = ''
      this.nums = ''
      this.points = ''
      this.coupons = ''
    })
  },
  // 下拉刷新
  onPullDownRefresh() {
    const $this = this
    setTimeout(function () {
      //停止刷新
      uni.stopPullDownRefresh()
      // 这里放刷新数据的方法
      if ($this.user) {
        $this.getMember()
        $this.getStatisticsNum()
        $this.getPoints()
        $this.getCoupons()
      }
    }, 1000)
  },
  //监听导航栏自定义按钮事件
  onNavigationBarButtonTap(e) {
    if (e.index == 0) {
      this.toMessage()
    }
    if (e.index == 1) {
      this.onSetting()
    }
  },
  // 滚动到底部
  onReachBottom() {
    this.$refs.goodsRecommend.params.page_no += 1
    this.$refs.goodsRecommend.getGoodsList()
  },
  //滚动距离
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  },
  methods: {
    //点击事件
    handleJudgeLogin(url, value) {
      let $this = this
      uni.getNetworkType({
        success(res) {
          if (res.networkType !== 'none') {
            $this.judgeLogin(() => {
              if (value) {
                uni.navigateTo({ url: url + value })
              } else {
                uni.navigateTo({ url: url })
              }
            }, 'force')
          } else {
            $this.$u.toast('当前无网络，请检查后重试')
          }
        }
      })
    },
    wxMiniBindPhone(e) {
      if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
        return
      }
      const encrypted = e.detail.encryptedData
      const iv = e.detail.iv
      API_Connect.wxMiniBindPhone(encrypted, iv).then(res => {
        if (res.code === 200) {
            var user = Cache.getItem(Keys.user)
            user.mobile = res.mobile
            Cache.setItem(Keys.user, user)
            this.user = user
            this.getMember()
        } else {
            uni.showModal({
              title: '提示',
              content: `${res.code === 501 ? '已经绑定过其他会员' : '未绑定手机号'}, 去手动设置？`,
              success: res => {
                if (res.confirm) {
                  uni.navigateTo({ url: '/pages/auth/bind-phone' })
                }
              }
            })
        }
      })
    },
    bindPhone() {
      uni.navigateTo({ url: '/pages/auth/bind-phone' })
    },
    //获取用户信息
    getMember() {
      API_Members.getUserInfo().then(res => {
        this.user = res
        Cache.setItem(Keys.user, this.user)
      })
    },
    //获取统计数量
    getStatisticsNum() {
      API_Members.getStatisticsNum().then(res => {
        this.nums = res
      })
    },
    // 获取消费积分
    getPoints() {
      API_Members.getPoints().then(response => {
        this.points = response
      })
    },
    //获取可用优惠券
    getCoupons() {
      const params = {
        page_no: 1,
        page_size: 10,
        status: 1
      }
      API_Members.getCoupons(params).then(response => {
        this.coupons = response.data_total
      })
    },
    //设置
    onSetting() {
      this.handleJudgeLogin('/mine-module/setting')
    },
    toMessage() {
      if (config.im) {
        this.show_message_mask = true
      } else {
        this.handleJudgeLogin('/mine-module/website-message')
      }
    },
    // 获取未读客服IM消息数量
    getUnreadChatNum() {
      if (!config.im || !this.user) return
      clearTimeout(this.unread_timer)
      API_Message.getUnreadChatNum().then(res => {
        this.unread_chat_num = res
        this.unread_timer = setTimeout(this.getUnreadChatNum, 5000)
      })
    }
  }
}
</script>

<style lang="scss">
.bind-phone{
    font-size: 22rpx !important;
    color: #FFFFFF;
    background-color: #ff5000;
    margin: 10rpx 0;
    border-radius: 30rpx;
    &:after {
        border: none !important;
    }
}
.wrap {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--window-top));
    width: 100%;
}
.notice-bar-view {
    // background: linear-gradient(70deg, #7753fe, #bb2afd);
	background: linear-gradient(145deg,#ff9000,#ff5000 77%);
    margin: 0 20rpx;
    margin-top: -100rpx;
    height: 320rpx;
    // padding: 25rpx;
    border-radius: 10rpx;
    .mine-name-view {
      color: #fff;
      .mine-nickname {
          font-size: 40rpx;
          font-weight: 500;
      }
      .mine-uname {
          font-size: 25rpx;
          margin-top: 7rpx;
      }
    }
    .no-login-view {
        margin-left: 30rpx;
        font-size: 30rpx;
        color: #fff;
    }
    .mine-jifen {
        font-size: 22rpx;
        padding: 12rpx 25rpx;
        border-top-left-radius: 40rpx;
        border-bottom-left-radius: 40rpx;
        color: #c78a0b;
        background: linear-gradient(to right, #fded5d, #fec923)
    }
    /deep/ {
        .u-badge {
            line-height: 20rpx !important;
            font-size: 20rpx !important;
        }
    }
    .mine-common-view {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 20rpx;
        .common-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20rpx;
            color: #fff;
            .num {
               font-size: 30rpx;
               font-weight: 600;
               margin-bottom: 15rpx;
            }
            .title {
                font-size: 25rpx;
            }
        }
    }
}
.mine-header {
    height: 200rpx;
    color: #F2F2F2;
    // background: linear-gradient(to right, #6f25f3, #6d25f2);
	background: #ff5000;
    .mine-setting {
      position: relative;
    }
}

.body-view {
    .block-view {
        background-color: #fff;
        margin: 20rpx;
        border-radius: 10rpx;
        padding: 10rpx 0;
        .block-header {
            font-size: 28rpx;
            font-weight: 600;
            margin: 20rpx 0;
            .title {
                // border-left: 8rpx solid $u-type-error;
                padding: 0 20rpx;
                font-size: 30rpx;
            }
            .more-text {
                color: #909399;
                font-size: 26rpx;
                font-weight: 400;
                margin-right: 20rpx;
            }
        }
        .block-body {
            display: flex;
            flex-direction: row;
            justify-content: left;
            flex-wrap: wrap;
            margin: 20rpx 0;
            .block-item-5 {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                .pay-icon {
                  background: linear-gradient(to right, #ff557f 0%, #ffaa7f 100%);
                }
                .send-icon {
                  background: linear-gradient(to right, #558AF3 0%, #72B7EF 100%);
                }
                .deliver-icon {
                  background: linear-gradient(to right, #00C6AF 0%, #8DE5C1 100%);
                }
                .message-icon {
                  background: linear-gradient(to right, #FE5500 0%, #E9F000 100%);
                }
                .service-icon {
                  background: linear-gradient(to right, #EB9A3B 0%, #FACD80 100%);
                }
                .block-img {
                  border-radius: 50%;
                  width: 70rpx;
                  height: 70rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin-bottom: 10rpx;
                    .block-icon {
                        width: 40rpx;
                        height: 40rpx;
                    }
                }
                .block-title {
                    font-size: 25rpx;
                    color: #606266;
                }
            }
            .block-item-4 {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin: 20rpx 0;
                width: 25%;
                .block-icon {
                    width: 70rpx;
                    height: 70rpx;
                    margin: 0 16rpx 16rpx 16rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .block-title {
                    font-size: 25rpx;
                    color: #606266;
                }
            }
        }
    }
}

.message-mask {
  .message-menus {
    position: absolute;
    right: 10rpx;
    background-color: #424242;
    border-radius: 10rpx;
    padding: 20rpx;
    box-sizing: border-box;
    box-shadow: 0 0 20rpx 0 rgba(0,0,0,.5);
    &::after {
      content: '';
      position: absolute;
      top: -10rpx;
      right: 14rpx;
      width: 40rpx;
      height: 40rpx;
      background-color: #424242;
      border-radius: 4rpx;
      transform: rotate(45deg);
    }
    .item-menus {
      display: flex;
      align-items: center;
      height: 60rpx;
      color: #9e9e9e;
    }
  }
}
</style>
